<!--
 * @Author: zi.yang
 * @Date: 2021-04-10 10:48:18
 * @LastEditors: zi.yang
 * @LastEditTime: 2021-04-29 15:38:25
 * @Description: In User Settings Edit
 * @FilePath: \take-out-food\src\views\Home.vue
-->
<template>
  <div class="home">
    <home-header :seller="seller"></home-header>
    <div class="tab border-1px">
      <router-link tag="div" to="/goods" class="tab-item">商品</router-link>
      <router-link tag="div" to="/ratings" class="tab-item">评论</router-link>
      <router-link tag="div" to="/seller" class="tab-item">商家</router-link>
    </div>
    <router-view></router-view>
    <home-footer></home-footer>
  </div>
</template>

<script>
import HomeHeader from '@components/header';
import HomeFooter from '@components/footer';
import axios from 'axios';
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeFooter,
  },
  data() {
    return {
      seller: {},
    };
  },
  created() {
    axios.get('/food-api/data.json').then((res) => this.getDetailData(res));
  },
  methods: {
    getDetailData(response) {
      const res = response.data;
      this.seller = res.seller;
      this.goods = res.goods;
      this.bus.$data.seller = res.seller;
      this.bus.$data.goods = res.goods;
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@styles/mixin.styl';
.home
  .tab
    display flex
    width 100%
    height 40px
    line-height 40px
    //border-bottom 1px solid rgba(7,17,27,.1)
    border-1px(rgba(7,17,27,.1))
    .tab-item
      flex 1
      text-align center
      font-size 14px
      color rgb(77,85,93)
      cursor pointer
      &.router-link-active
        color rgb(240,20,20)
</style>
